
// Fonts
// @import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables
// @import "variables";

// Bootstrap
@import "~bootstrap-sass/assets/stylesheets/bootstrap";
$navbar-color:#3c3e42;

/* universal */
body{
  padding-top:60px;
}
section{
  overflow:auto;
}
textarea{
  resize:vertical;
}
.jumbotron{
  text-align:center;
}

/* typography */
h1,h2,h3,h4,h5,h6{
  line-height:1;
}

h1{
  font-size:3em;
  letter-spacing:-2px;
  margin-bottom:30px;
  text-align:center;
}

h2{
  font-size:1.2em;
  letter-spacing:-1px;
  margin-bottom:30px;
  text-align:center;
  font-weight:normal;
  color:#777;
}

p{
  font-size:1.1em;
  line-height:1.7em;
}

/* header */
.navbar-inverse{
  background-color:$navbar-color;
}

#logo{
  float:left;
  margin-right:10px;
  font-size:1.7em;
  color:#fff;
  text-decoration: none;
  letter-spacing:-1px;
  padding-top:9px;
  font-weight:bold;
  &:hover{
    color:#fff;
  }
}

#logout{
  cursor:default;
  &:hover{
    background-color:transparent;
  }
}

/* footer */
footer{
  margin-top:45px;
  padding-top:5px;
  border-top:1px solid #eaeaea;
  color:#777;

  a{
    color:#555;
  }

  a:hover{
    color:#222;
  }

  small{
    float:left;
  }

  ul{
    float:right;
    list-style:none;
    li{
      float:left;
      margin-left:15px;
    }
  }

  img.brand-icon{
    width:17px;height:17px;
  }

  .slogon{
    font-size:13px;
    font-weight:bold;
  }
}
/* sidebar */
aside{
  section{
    padding:10px 0px;
    margin-top:20px;
    &:first-child{
      border:0px;
      padding-top:0px;
    }
    span{
      display:block;
      margin-bottom:3px;
      line-height:1;
    }
  }
}

section.user_info{
  padding-bottom:10px;
  margin-top:20px;
  text-align:center;
  .gravatar{
    float:none;
    max-width:70px;
  }

  h1{
    font-size:1.4em;
    letter-spacing:-1px;
    margin-bottom:3px;
    margin-top:15px;
  }
}

.gravatar{
  float:left;
  margin-right:10px;
  max-width:50px;
  border-radius:50%;
}
.stats {
  overflow: auto;
  margin-top: 0;
  padding: 0;
  a {
    float: left;
    padding: 0 10px;
    text-align: center;
    width: 33%;
    border-left: 1px solid $gray-lighter;
    color: gray;
    &:first-child {
      padding-left: 0;
      border: 0;
    }
    &:hover {
      text-decoration: none;
      color: #337ab7;
    }
  }
  strong {
    display: block;
    font-size: 1.2em;
    color: black;
  }
}

.user_avatars {
  overflow: auto;
  margin-top: 10px;
  .gravatar {
    margin: 1px 1px;
  }
  a {
    padding: 0;
  }
}

.users.follow {
  padding: 0;
}

/* forms */

#follow_form button {
  margin: 0 auto;
  display: block;
  margin-top: 25px;
}


/* forms */
input,textarea,select,.uneditable-input{
  border:1px solid #bbb;
  margin-bottom:15px;
}

input{
  height:auto !important;
}

.panel{
  margin-top:50px;
}

/* Users edit */
.gravatar_edit{
  margin:15px auto;
  text-align:center;
  .gravatar{
    float:none;
    max-width:100px;
  }
}
/* Users index */
.users{
  list-style:none;
  margin:0px;
  padding-left:0px;
  li{
    overflow:auto;
    padding:10px 0px;
    border-bottom:1px solid $gray-lighter;
  }
}

.delete-btn{
  float:right;
  position:relative;
  right:0px;
}

/* statuses */
.statuses{
  list-style:noen;
  padding:0px;
  margin-top:20px;
  li{
    padding:10px 0px;
    border-top:1px solid #e8e8e8;
    position:relative;
  }

  .user{
    margin-top:5em;
    padding-top:0px;
  }

  .content{
    display:block;
    margin-left:60px;
    word-break:break-word;
    img{
      display:block;
      padding:5px 0px;
    }
  }

  .timestamp{
    color:$gray-light;
    display:block;
    margin-left:60px;
  }

  .gravatar{
    margin-right:10px;
    margin-top:5px;
  }

  form{
    button.status-delete-btn{
      position:absolute;
      right:0px;
      top:10px;
    }
  }
}

aside{
  textarea{
    height:100px;
    margin-bottom:5px;
  }
}

.status_form{
  margin-top:20px;
}